<#macro widget hotel>
<#assign maxpage=5>
<#assign currentpage=1>
<link rel="stylesheet" href="${springMacroRequestContext.getContextPath()}/resources/css/hotel_widget.css"/>


<#if hotel??>

${hotel.hotelId?string.computer}
<div id="hotel${hotel.hotelId?string.computer}">
    <div>
    <#if hotel.roomRateDetailsList??>
        <#list hotel.roomRateDetailsList.roomRateDetails as roomRate>
             <#if roomRate.rateInfos.rateInfo[0].promoDescription??>
                <div id="hotel-results-promo" class="promo">
                    <span class="pull-left">
                        Room type: ${roomRate.roomDescription} &nbsp;&nbsp;&nbsp;|
                        &nbsp; Promo: ${roomRate.rateInfos.rateInfo[0].promoDescription}&nbsp;&nbsp;&nbsp;|
                        <#if roomRate.rateInfos.rateInfo[0].promoDetailText??>,
                            ${roomRate.rateInfos.rateInfo[0].promoDetailText}
                        </#if>
                        <#if roomRate.rateInfos.rateInfo[0].currentAllotment?? >
                            &nbsp; Rooms left: ${roomRate.rateInfos.rateInfo[0].currentAllotment}
                        </#if>
                    </span>
                    <span></span>
                    <span class="pull-right" ></span>
                </div>
            </#if>
        </#list>
    </#if>
        <div id="hotel-results-division" class="well">
            <div class="hotel-summary" >
                <div class="hotel-thumbnail span2">
                    <img src="http://images.travelnow.com/${hotel.thumbNailUrl?replace('_t','_g')}" class="thumbnail-border" />
                </div>
                <div>
                    <h4>${hotel.name}, ${hotel.city}, ${hotel.countryCode}</h4>
                </div>
                <div class="span8">${hotel.shortDescription}</div>
                <div class="span8"><b>Address:</b> ${hotel.address1}<#if hotel.address2??>,${hotel.address2}</#if> </div>
            </div>
            <br />
            <div class="tabbable tabs-below"> <!-- Only required for left/right tabs -->
              <ul class="nav nav-tabs">
                <li class="active"><a href="#hotel-details" data-toggle="tab" onclick="toggleDetails($('#hotel-details${hotel.hotelId?string.computer}'),'hotel${hotel.hotelId?string.computer}'); "  >Section 1</a></li>
                <li><a href="#hotel-gallery" data-toggle="tab" onclick="toggleDetails($('#hotel-gallery${hotel.hotelId?string.computer}'),'hotel${hotel.hotelId?string.computer}');">Section 2</a></li>
                <li class="pull-right" style="margin-right: 100px"><a href="#hotel-rooms" data-toggle="tab" onclick="toggleDetails($('#hotel-map${hotel.hotelId?string.computer}'),'hotel${hotel.hotelId?string.computer}');showMapForHotel(${hotel.hotelId?string.computer}, ${hotel.latitude}, ${hotel.longitude});">Location</a></li>
                <li class="pull-right" style="margin-right: 100px"><a href="#hotel-rooms" data-toggle="tab" onclick="toggleDetails($('#hotel-rooms${hotel.hotelId?string.computer}'),'hotel${hotel.hotelId?string.computer}');">Section 3</a></li>
              </ul>
              <div class="tab-content">
                <div class="tab-pane hotel-tab-content hidden" id="hotel-details${hotel.hotelId?string.computer}">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit erat, sodales nec dictum in, aliquet vel lacus. Nulla lacinia mattis mi, ac aliquam velit dictum sed. Fusce vitae libero ante. Vestibulum quis dolor arcu. Aliquam non nisi porttitor nibh semper ultrices ut in lacus. Quisque varius sodales justo, at suscipit est scelerisque ut. Nunc sem leo, vestibulum id malesuada dapibus, tincidunt quis sem. Sed volutpat volutpat lorem, ut gravida est fermentum nec. Morbi molestie velit sit amet ligula ornare at ultricies arcu elementum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit erat, sodales nec dictum in, aliquet vel lacus. Nulla lacinia mattis mi, ac aliquam velit dictum sed. Fusce vitae libero ante. Vestibulum quis dolor arcu. Aliquam non nisi porttitor nibh semper ultrices ut in lacus. Quisque varius sodales justo, at suscipit est scelerisque ut. Nunc sem leo, vestibulum id malesuada dapibus, tincidunt quis sem. Sed volutpat volutpat lorem, ut gravida est fermentum nec. Morbi molestie velit sit amet ligula ornare at ultricies arcu elementum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit erat, sodales nec dictum in, aliquet vel lacus. Nulla lacinia mattis mi, ac aliquam velit dictum sed. Fusce vitae libero ante. Vestibulum quis dolor arcu. Aliquam non nisi porttitor nibh semper ultrices ut in lacus. Quisque varius sodales justo, at suscipit est scelerisque ut. Nunc sem leo, vestibulum id malesuada dapibus, tincidunt quis sem. Sed volutpat volutpat lorem, ut gravida est fermentum nec. Morbi molestie velit sit amet ligula ornare at ultricies arcu elementum.</p>

                </div>
                <div class="tab-pane hotel-tab-content hidden" id="hotel-gallery${hotel.hotelId?string.computer}">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div class="tab-pane hotel-tab-content hidden" id="hotel-rooms${hotel.hotelId?string.computer}">
                  <p>Howdy, I'm in Section 3.</p>
                </div>
                <div class="tab-pane hotel-tab-content hidden mapContainer" id="hotel-map${hotel.hotelId?string.computer}">
                  <p>Hello map</p><div id="map${hotel.hotelId?string.computer}" style="height:250px;"></div>
                </div>

              </div>
            </div>
        </div>

    </div>
</div>
</#if>
</#macro>